<template>
  <fui-bottom-popup radius="36" :show="visible" @close="close">
    <view class="ui-popup popup-carriage">
      <view class="ui-popup-header">
        <view class="ui-popup-title">默认运费设置</view>
      </view>
      <view class="ui-popup-content">
        <fui-form ref="formRef" :model="form" top="0" :show="false" class="carriage-form">
          <view class="carriage-form-item">
            <fui-text text="购买" size="24"></fui-text>
            <fui-form-item label="" prop="startCount" left="0" :padding="['16rpx', 0]">
              <fui-input v-model="form.startCount" type="digit" backgroundColor="transparent" size="24" :padding="[0]" :borderBottom="false" :maxlength="20" @input="onChangeNum($event, 'startCount')"></fui-input>
            </fui-form-item>
            <fui-text :text="CARRIAGE_COST_METHODS[chargeMode].unit" size="24"></fui-text>
            <fui-text text="内，运费" size="24"></fui-text>
            <fui-form-item label="" prop="startPrice" left="0" :padding="['16rpx', 0]">
              <fui-input v-model="form.startPrice" type="digit" backgroundColor="transparent" size="24" :padding="[0]" :borderBottom="false" :maxlength="20" @input="onChangePrice($event, 'startPrice')"></fui-input>
            </fui-form-item>
            <fui-text text="元。" size="24"></fui-text>
          </view>
          <view class="carriage-form-item">
            <fui-text text="每增加" size="24"></fui-text>
            <fui-form-item label="" prop="extraCount" left="0" :padding="['16rpx', 0]">
              <fui-input v-model="form.extraCount" type="digit" backgroundColor="transparent" size="24" :padding="[0]" :borderBottom="false" :maxlength="20" @input="onChangeNum($event, 'extraCount')"></fui-input>
            </fui-form-item>
            <fui-text :text="CARRIAGE_COST_METHODS[chargeMode].unit" size="24"></fui-text>
            <fui-text text="，运费增加" size="24"></fui-text>
            <fui-form-item label="" prop="extraPrice" left="0" :padding="['16rpx', 0]">
              <fui-input v-model="form.extraPrice" type="digit" backgroundColor="transparent" size="24" :padding="[0]" :borderBottom="false" :maxlength="20" @input="onChangePrice($event, 'extraPrice')"></fui-input>
            </fui-form-item>
            <fui-text text="元。" size="24"></fui-text>
          </view>
        </fui-form>
      </view>
      <view class="ui-popup-footer">
        <fui-button text="取消" class="ui-popup-btn ui-btn-primary_plain" bold @click="close"></fui-button>
        <fui-button text="确认" class="ui-popup-btn" bold @click="submit"></fui-button>
      </view>
    </view>
  </fui-bottom-popup>
</template>

<script setup>
import { ref, inject, watch } from 'vue'
import { CARRIAGE_COST_METHODS } from './consts'

const modal = inject('$modal')

const props = defineProps({
  chargeMode: {
    type: String,
    default: 21
  }
})

const emits = defineEmits(['submit'])

// 表单数据
const initForm = {
  startCount: 1,
  startPrice: 0,
  extraCount: 1,
  extraPrice: 0
}
const formRef = ref(null)
const form = ref({})
const rules = [
  {
    name: 'startCount',
    rule: ['required'],
    msg: [`请输入首件${props.chargeMode == 21 ? '数量' : '重量'}`]
  },
  {
    name: 'startPrice',
    rule: ['required'],
    msg: ['请输入首件运费']
  },
  {
    name: 'extraCount',
    rule: ['required'],
    msg: [`请输入续件${props.chargeMode == 21 ? '数量' : '重量'}`]
  },
  {
    name: 'extraPrice',
    rule: ['required'],
    msg: ['请输入续件运费']
  }
]

const onChangeNum = async (value, field) => {
  if (value <= 0) {
    modal.msgError(`${props.chargeMode == 21 ? '数量' : '重量'}必须大于0！`)
    form.value[field] = await 1
  } else if (value.indexOf('.') > -1) {
    if (props.chargeMode == 21) {
      form.value[field] = await (value * 1).toFixed(0)
    } else {
      form.value[field] = await (value * 1).toFixed(1)
    }
  } else {
    form.value[field] = await (value * 1).toFixed(0)
  }
}

const onChangePrice = async (value, field) => {
  if (value < 0) {
    modal.msgError('金额必须大于等于0！')
    form.value[field] = 0
  } else if (value.indexOf('.') > -1) {
    form.value[field] = await (value * 1).toFixed(2)
  } else {
    form.value[field] = await (value * 1).toFixed(0)
  }
}

const visible = ref(false)
const show = (data) => {
  visible.value = true
  if (data && data.startCount) {
    form.value = JSON.parse(JSON.stringify(data))
  } else {
    form.value = JSON.parse(JSON.stringify(initForm))
  }
}
const close = () => {
  visible.value = false
}
const submit = async () => {
  const validRes = await formRef.value.validator(form.value, rules)
  if (validRes.isPassed) {
    emits('submit', {...form.value})
    visible.value = false
  } else {
    modal.msgError(validRes.errorMsg)
  }
}

defineExpose({
  show,
  close
})
</script>

<style lang="scss" scoped>
.ui-popup {
  padding: 36rpx 36rpx 70rpx;
  .ui-popup-header {
    margin-bottom: 16rpx;
    padding: 0 16rpx;
    .ui-popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  .ui-popup-content {
    max-height: 60vh;
    min-height: 240rpx;
    overflow: auto;
    padding: 0 16rpx;
  }
  .ui-popup-footer {
    display: flex;
    .ui-popup-btn {
      flex: 1;
      margin: 0 16rpx !important;
    }
  }
}

.carriage-form {
  height: 300rpx;
  .carriage-form-item {
    display: flex;
    margin-top: 32rpx;
    ::v-deep .fui-text__wrap {
      .fui-text__content {
        white-space: nowrap;
      }
    }
    .fui-form__item-wrap {
      width: auto;
      border-radius: 8rpx !important;
      background-color: #f7f7f7 !important;
      margin: 0 10rpx;
      padding: 0 16rpx;
    }
  }
}
</style>